<template>
    <div class="common-layout">
        <el-container>
          <el-aside width="200px">
            <WasideCom></WasideCom>
          </el-aside>
          <el-container>
            <el-header>
              <WheaderCom></WheaderCom>
            </el-header>
            <el-main>
              <router-view></router-view>
            </el-main>
          </el-container>
        </el-container>
      </div>
</template>

<script>
    import WheaderCom from '../components/WheaderCom.vue'
    import WasideCom from '../components/WasideCom.vue'
    export default {
        components:{WasideCom,WheaderCom},
        setup () {/* 做布局用vbase-3 */
            
    
            return {}
        }
    }
    </script>
    
    <style lang="scss" scoped>
    .el-container{
        height:100vh;
    }
    .el-header{
      background-color: rgba(135, 87, 248, 0.3);
      height: 200px;
    }
    .el-aside{
      background-color: rgb(11,2,71);
        color: #fff;
        padding: 0;
    }
    .el-main{
      background-color: rgba(0,0,0,.1);
    }
    </style>